import React, {Component} from 'react';
import {dark, light, baseURL} from '../../config';
import homePageImage from '../../assets/image/homePageImage.jpeg';
import {
  Appearance,
  StyleSheet,
  StatusBar,
  ImageBackground,
  View,
  ScrollView,
  Text,
  Image,
  TouchableOpacity,
} from 'react-native';
import {connect} from 'react-redux';
import {Icon, Tabs} from '@ant-design/react-native';
import PageHeader from '../../components/PageHeader';
import {pxToDp} from '../../utils/stylesKits';

/**
 * APP HomePage 页面 个人主页
 * @colorScheme 用户手机主题模式 是否开启了黑夜模式
 * */

const colorScheme = Appearance.getColorScheme() === 'dark' ? dark : light;
const tabs = [{title: '动态'}, {title: '文章'}];

class HomePage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'HomePage',
    };
  }

  componentDidMount() {}

  componentDidUpdate(prevProps, prevState) {}

  componentWillUnmount() {}

  render() {
    const {userInfo} = this.props;
    return (
      <View style={styles.container}>
        <StatusBar
          backgroundColor="transparent"
          barStyle={colorScheme.barStyle}
          translucent={true}
        />
        <ImageBackground source={homePageImage} style={styles.homePageImage}>
          <PageHeader />
          <Image
            style={styles.avatar}
            source={{
              uri: `${baseURL}${userInfo.avatar}`,
            }}
          />
        </ImageBackground>
        <View style={styles.userInfo}>
          <View style={styles.userInfoContent}>
            <View style={styles.userInfoContentLeft}>
              <View style={styles.userInfoUsernameLv}>
                <Text
                  style={styles.userInfoUsername}
                  numberOfLines={1}
                  ellipsizeMode={'tail'}>
                  {userInfo.nickname}
                </Text>
                <Text style={styles.userInfoLv}>Lv16</Text>
              </View>
              <Text
                style={styles.userInfoJobTitle}
                numberOfLines={1}
                ellipsizeMode={'tail'}>
                {userInfo.job_title}
              </Text>
            </View>
            <TouchableOpacity
              onPress={() => this.props.navigation.navigate('EditUser')}>
              <Text style={styles.editBtn}>编辑</Text>
            </TouchableOpacity>
          </View>
          <View style={styles.userInfoIntroduction}>
            <Text numberOfLines={5} ellipsizeMode={'tail'}>
              {userInfo.introduction}
            </Text>
          </View>
        </View>
        <View style={styles.tabBar}>
          <Tabs
            tabs={tabs}
            tabBarBackgroundColor={colorScheme.backgroundColor}
            tabBarInactiveTextColor={colorScheme.color}
            tabBarActiveTextColor="#2387d7"
            tabBarUnderlineStyle={styles.tabBarUnderlineStyle}
            initialPage={0}>
            <Text>动态</Text>
            <Text>文章</Text>
          </Tabs>
        </View>
      </View>
    );
  }
}

const mapStateToProps = state => ({userInfo: state.$userInfo.userInfo});
const mapDispatchToProps = {};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    backgroundColor: colorScheme.backgroundColorA,
  },
  homePageImage: {
    paddingTop: pxToDp(85),
  },
  avatar: {
    position: 'relative',
    top: pxToDp(40),
    width: pxToDp(80),
    height: pxToDp(80),
    marginLeft: pxToDp(10),
    borderRadius: pxToDp(40),
    borderWidth: pxToDp(2),
    borderColor: colorScheme.color,
    zIndex: 100,
  },
  userInfo: {
    backgroundColor: colorScheme.backgroundColor,
    padding: pxToDp(10),
    paddingTop: pxToDp(50),
  },
  userInfoContent: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  userInfoContentLeft: {
    flex: 1,
    paddingRight: pxToDp(10),
  },
  userInfoUsernameLv: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  userInfoUsername: {
    maxWidth: '80%',
    fontSize: pxToDp(20),
    color: colorScheme.color,
  },
  userInfoLv: {
    marginLeft: pxToDp(5),
    padding: pxToDp(1),
    borderRadius: pxToDp(2),
    color: '#ffffff',
    fontSize: pxToDp(8),
    fontWeight: '800',
    backgroundColor: '#38badc',
  },
  userInfoJobTitle: {
    fontSize: pxToDp(14),
    color: colorScheme.color,
    opacity: 0.7,
  },
  editBtn: {
    padding: pxToDp(5),
    paddingLeft: pxToDp(15),
    paddingRight: pxToDp(15),
    color: '#38badc',
    borderWidth: pxToDp(1),
    borderColor: '#38badc',
    borderRadius: pxToDp(5),
  },
  userInfoIntroduction: {
    marginTop: pxToDp(10),
    fontSize: pxToDp(14),
    color: colorScheme.color,
  },
  tabBar: {
    flex: 1,
    position: 'relative',
    width: '100%',
    marginTop: pxToDp(8),
  },
  tabBarUnderlineStyle: {
    width: pxToDp(36),
    marginLeft: pxToDp(75),
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(HomePage);
